<script setup lang="ts">

import type {WorkFlow} from "~/utils/comfyuiApi";

interface Props {
  workflow: WorkFlow
}

const props = withDefaults(defineProps<Props>(), {
  workflow: {
    title: 'title'
  } as WorkFlow
})

/**
 * 判断是否为视频
 * @param src
 */
const isVideo = (src: string) => {
  return src?.includes('.mp4')
}

</script>

<template>
  <v-card
      :style="{ backgroundImage: 'linear-gradient(135deg, #757575, #616161)' }"
      color="primary"
      variant="elevated"
      class="mx-auto"
      min-height="150"
  >
    <v-row class="d-flex align-center justify-center">
      <v-col cols="3" class="d-flex align-center justify-center">
        <div class="ml-1 rounded my-auto" v-if="isVideo(workflow.cover)">
          <video autoplay loop muted
                 style="transition: transform 0.3s ease-in-out;">
            <source :src="workflow.cover" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
          <v-img v-else class="ml-1 rounded my-auto" :src="workflow.cover" cover/>
      </v-col>
      <v-col cols="9">
        <v-card-item>
          <div>
            <div class="text-caption mb-1">
              名称：{{ workflow.name }}
            </div>
            <div class="text-caption mb-1">
              标题：{{ workflow.title }}
            </div>
            <div class="text-caption">功能描述：{{ workflow.description }}</div>
            <div class="text-caption">算力消耗：{{ workflow.power || 0 }}</div>
            <div class="text-caption">排序：{{ workflow.sortNumber || '无' }}</div>
          </div>
        </v-card-item>
        <v-card-actions>
          <slot name="actions"></slot>
        </v-card-actions>
      </v-col>
    </v-row>
  </v-card>
</template>

<style scoped lang="scss">

</style>